<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerE1) {
      return new bootstrap.Tooltip(tooltipTriggerE1)
    })
  </script>
</head>
<!--
轮播 旋转木马/幻灯片
.carousel 创建轮播
.carousel-indicators 为轮播添加指示器,它们是每张幻灯片底部的小店.表示轮播中有多少张幻灯片,以及用户当前正在查看那张幻灯片
.carousel-inner 将幻灯片添加到轮播
.carousel-item 规定每张幻灯片的内容
.carousel-control-prev 向轮播添加一个向左(上一个)按钮,允许用户在幻灯片之间回退
.carousel-control-next 向轮播添加一个向右(上一个)按钮,允许用户在幻灯片之间前进
.carousel-control-prev-icon 与.carousel-control-prev 一起使用 创建 上一个按钮
.carousel-control-next-icon 与.carousel-control-next 一起使用 创建 上一个按钮
.slide	从一个项目滑到下一个项目时添加 CSS 过渡和动画效果。如果您不想要这种效果，请删除此类。
为每个 div class="carousel-item" 内的 div class="carousel-caption" 中添加元素 为每张幻灯片创建标题

模态
Modal 组件是一种对话框/弹出窗口,显示在当前页面的上部:
模态尺寸
为小模态添加 .modal-sm 类（max-width 300px）、
为大型模态添加 .modal-lg 类（max-width 800px）
为超大模态添加 .modal-xl 来更改模态的大小（max-width 1140 像素）。默认为 500 像素最大宽度。
全屏模态 如果希望模态跨越页面的整个宽度和高度 使用 .modal-fullscreen类
响应式全屏模态 .modal-fullscreen-*-* 类控制模态何时全屏显示
.modal-fullscreen-sm-down	576px 以下全屏
.modal-fullscreen-md-down	768px 以下全屏
.modal-fullscreen-lg-down	992px 以下全屏
.modal-fullscreen-xl-down	1200px 以下全屏
.modal-fullscreen-xxl-down	1400px 以下全屏

居中的模态
  .modal-dialog-centric类 在页面内垂直和水平居中模态
滚动模态
  div class="modal-dialog"
但是，通过将 .modal-dialog-scrollable 添加到 .modal-dialog 可以只在模态内滚动，而不是页面本身：

工具提示
  工具提示组件是一种小的弹出框,当用户将鼠标指针移动到元素上时会出现
  默认情况下工具提示将出现在元素的顶部
  使用 data-bs-placement 属性设置工具提示在元素的顶部,底部,左侧,右侧的位置

弹出框
  弹出框 popover 组件类似工具提示;它是一种弹出框,当用户点击元素时出现,不同的是弹出框可以包含更多内容

toast
  Toast 组件类似警告框,当发生某些事情时,例如当用户点击按钮,提交表单时会显示几秒钟
  如需创建 Toast，请使用 .toast 类，并在其中添加 .toast-header 和 .toast-body。
注意：默认情况下，toast 是隐藏的。如果要显示它，请使用 .show 类。如果要关闭它，请使用 <button> 元素并添加 data-bs-dismiss="toast"：

scrollspy 用于根据滚动位置自动更新导航列表中的链接

-->
<body>
<div class="container mt-3">
  <h1>轮播</h1>
  <div id="demo" class="carousel slide" data-bs-ride="carousel">
    <!--    指标/点-->
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
      <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
      <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
    </div>
    <!--    幻灯片/轮播-->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="/img/girl_flower_dress_1066910_1920x1080.jpg" alt="girl 0" class="d-block w-100 h-50">
        <!--        为每个页面添加标题-->
        <div class="carousel-caption">
          <h3>Shanghai</h3>
          <p>We had such a great time in Shanghai!</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="/img/girl_hair_pink_1108892_1920x1080.jpg" alt="girl 1" class="d-block w-100 h-50">
        <div class="carousel-caption">
          <h3>Wuhan</h3>
          <p>We had such a great time in Wuhan!</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="/img/girl_hairpin_kimono_1068786_1920x1080.jpg" alt="girl 2" class="d-block w-100 h-50">
        <div class="carousel-caption">
          <h3>Beijing</h3>
          <p>We had such a great time in Beijing!</p>
        </div>
      </div>
      <!--    左右控件/图标-->
      <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
    <br>
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="javascript:void(0)">Logo</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="mynavbar">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)">链接</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)">链接</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)">链接</a>
            </li>
          </ul>
          <form class="d-flex">
            <input class="form-control me-2" type="text" placeholder="Search">
            <button class="btn btn-primary" type="button">Search</button>
          </form>
        </div>
      </div>
    </nav>
    <div class="container-fluid mt-3">
      <h3>导航栏表单</h3>
      <p>您还可以在导航栏中包含表单。</p>
    </div>
  </div>
  <div class="container mt-3">
    <h3>Modal 实例</h3>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
      打开模态
    </button>
  </div>
  <!--  模态 .fade类在打开 modal-sm 小型模态-->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-sm modal-dialog-centered">
      <div class="modal-content">
        <!--        模态标题-->
        <div class="modal-header">
          <h4 class="modal-title">模态标题</h4>
          <button class="btn-close" type="button" data-bs-dismiss="modal"></button>
        </div>

        <!--        模态主体-->
        <div class="modal-body">
          模态主体....
        </div>

        <!--        模态页脚-->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
  <h2>工具提示</h2>
  <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="太棒了!">请悬停在我上面!</button>
  <h3>工具提示定位</h3>
  <p>data-bs-placement 属性指定工具提示的位置</p>
  <a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="太棒了!">Top</a>
  <a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="太棒了!">Bottom</a>
  <a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="太棒了!">Left</a>
  <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="太棒了!">Right</a>
  <h3>弹出框</h3>
  <button type="button" class="btn btn-primary" data-bs-toggle="popover" title="弹出框标题"
          data-bs-content="弹出框内的一些内容">切换弹出框
  </button>
  <h3>弹出框定位</h3>
  <a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a>
  <a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</a>
  <a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="left" data-content="Content">Left</a>
  <a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">Right</a>
  <h3>关闭弹出框</h3>
  <a href="#" title="关闭弹出框" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="单击文档中任意位置可关闭此弹出窗口">点击我</a>
  <h3>悬停弹出框</h3>
  <a href="#" title="关闭弹出框" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="鼠标悬停弹出">点击我</a>
  <br>
  <h3>Toast 实例</h3>
  <p>toast类似警告框,它只在发生某些事情时显示几秒钟(即当用户单击按钮,提交表单等时)</p>
  <button type="button" class="btn btn-primary" id="toastbtn">显示 Toast</button>
  <div class="toast">
    <div class="toast-header">
      <strong class="me-auto">Toast 标题</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      <p>toast 主体内的文本</p>
    </div>
  </div>

</div>
<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })
</script>
<script>
  document.getElementById("toastbtn").onclick = function (){
    var toastEliList = [].slice.call(document.querySelectorAll('.toast'))
    var toastList = toastEliList.map(function (toastEl){
      return new bootstrap.Toast(toastEl)
    })
    toastList.forEach(toast =>toast.show())
  }
</script>
</body>
</html>
